<template>
	<view class="page-wrapper">
		<div class="title" :style="'height:' + navH + 'px'" >
			<div @click="goBack()">
				<image src="../../../static/img/public/left.png" mode="widthFix"></image>
			</div>
			<input @click="showSearch" type="text" value="" placeholder="搜索" disabled="" />
		</div>
	 	<div class="content">
			<div class="tabs">
				<div class="tabs-top">
					<ul>
						<li @click="toggleTabs(0)" :class="nowTab === 0 ? 'active' : ''"><p>全部</p></li>
						<li @click="toggleTabs(1)" :class="nowTab === 1 ? 'active' : ''"><p>待付款</p></li>
						<li @click="toggleTabs(2)" :class="nowTab === 2 ? 'active' : ''"><p>已完成</p></li>
					</ul>
				</div>
				<div class="tabs-content">
					<div class="tabs-content-item" v-show="nowTab === 0" >
						<scroll-view scroll-y="true" v-if="all.list.length > 0" @scrolltolower="allLoadMore">
							<div class="list-item-wrapper"  v-for="item in all.list" :key="item.order_id" >
								<div @click="goDetail(item.order_sn)">
									<span>姓名:</span>
									<p v-text="item.name"></p>
									<p>￥{{item.total_fee}}</p>
								</div>
								<div @click="goDetail(item.order_sn)">
									<span>电话:</span>
									<p v-text="item.mobile"></p>
								</div>
								<div @click="goDetail(item.order_sn)">
									<span>订单:</span>
									<p v-text="item.goods_title"></p>
								</div>
								<div class="item-b">
									<p v-text="$timestampToTime(item.create_time*1000)"></p>
									<button @click="goPay(item)" v-if="item.status === 0" style=" background-color: #ffffff; padding: 0; color: #0385FA; font-size: 26rpx; height: 54rpx; line-height: 54rpx; width: 120rpx; border: 1rpx solid #0385FA; border-radius: 4rpx" >付款</button>
									<button v-if="item.status === 1" style=" background-color: #ffffff; padding: 0; color: #999999; font-size: 26rpx; height: 54rpx; line-height: 54rpx; width: 120rpx; border: 1rpx solid #999999; border-radius: 4rpx">已完成</button>
								</div>
							</div >
							<p class="loadmore-msg" v-show="all.loadMore.isLoading && all.loadMore.hasMore">loading...</p>
							<p class="loadmore-msg" v-show="!all.loadMore.hasMore">没有更多了</p>
							<p class="loadmore-msg" v-show="!all.loadMore.isLoading && all.loadMore.hasMore">上拉加载更多...</p>
						</scroll-view>
						<hEmpty v-if="all.list.length === 0" center="您还没有订单哦" img="../../static/img/public/order-empty.png"></hEmpty>
					</div>
					<div class="tabs-content-item" v-show="nowTab === 1">
						<scroll-view scroll-y="true" v-if="unPay.list.length > 0" @scrolltolower="unPayLoadMore">
							<div class="list-item-wrapper" v-for="item in unPay.list" :key="item.order_id" >
								<div @click="goDetail(item.order_sn)">
									<span>姓名:</span>
									<p v-text="item.name"></p>
									<p>￥{{item.total_fee}}</p>
								</div>
								<div @click="goDetail(item.order_sn)">
									<span>电话:</span>
									<p v-text="item.mobile"></p>
								</div>
								<div @click="goDetail(item.order_sn)">
									<span>订单:</span>
									<p v-text="item.goods_title"></p>
								</div>
								<div>
									<p v-text="$timestampToTime(item.create_time*1000)"></p>
									<button @click="goPay(item)" v-if="item.status === 0" style=" background-color: #ffffff; padding: 0; color: #0385FA; font-size: 26rpx; height: 54rpx; line-height: 54rpx; width: 120rpx; border: 1rpx solid #0385FA; border-radius: 4rpx" >付款</button>
									<button v-if="item.status === 1" style=" background-color: #ffffff; padding: 0; color: #999999; font-size: 26rpx; height: 54rpx; line-height: 54rpx; width: 120rpx; border: 1rpx solid #999999; border-radius: 4rpx">已完成</button>
								</div>
							</div >
							<p class="loadmore-msg" v-show="unPay.loadMore.isLoading && unPay.loadMore.hasMore">loading...</p>
							<p class="loadmore-msg" v-show="!unPay.loadMore.hasMore">没有更多了</p>
							<p class="loadmore-msg" v-show="!unPay.loadMore.isLoading && unPay.loadMore.hasMore">上拉加载更多...</p>
						</scroll-view>
						<hEmpty v-if="unPay.list.length === 0" center="您还没有这类订单哦" img="../../static/img/public/order-empty.png"></hEmpty>
					</div>
					<div class="tabs-content-item" v-show="nowTab === 2">
						<scroll-view scroll-y="true" v-if="isPay.list.length > 0" @scrolltolower="isPayLoadMore">
							<div class="list-item-wrapper" v-for="item in isPay.list" :key="item.order_id" >
								<div @click="goDetail(item.order_sn)">
									<span>姓名:</span>
									<p v-text="item.name"></p>
									<p>￥{{item.total_fee}}</p>
								</div>
								<div @click="goDetail(item.order_sn)">
									<span>电话:</span>
									<p v-text="item.mobile"></p>
								</div>
								<div @click="goDetail(item.order_sn)">
									<span>订单:</span>
									<p v-text="item.goods_title"></p>
								</div>
								<div>
									<p v-text="$timestampToTime(item.create_time*1000)"></p>
									<button @click="goPay(item)" v-if="item.status === 0" style=" background-color: #ffffff; padding: 0; color: #0385FA; font-size: 26rpx; height: 54rpx; line-height: 54rpx; width: 120rpx; border: 1rpx solid #0385FA; border-radius: 4rpx" >付款</button>
									<button v-if="item.status === 1" style=" background-color: #ffffff; padding: 0; color: #999999; font-size: 26rpx; height: 54rpx; line-height: 54rpx; width: 120rpx; border: 1rpx solid #999999; border-radius: 4rpx">已完成</button>
								</div>
							</div >
							<p class="loadmore-msg" v-show="isPay.loadMore.isLoading && isPay.loadMore.hasMore">loading...</p>
							<p class="loadmore-msg" v-show="!isPay.loadMore.hasMore">没有更多了</p>
							<p class="loadmore-msg" v-show="!isPay.loadMore.isLoading && isPay.loadMore.hasMore">上拉加载更多...</p>
						</scroll-view>
						<hEmpty v-if="isPay.list.length === 0" center="您还没有这类订单哦" img="../../static/img/public/order-empty.png"></hEmpty>
						
					</div>	
				</div>
			</div>
		</div>
		
		<div :class="search.isShow ? 'search show' : 'search'" >
			<div class="search-title" :style="'height:' + navH + 'px'" >
				<div @click="endSearchShow">
					<span>取消</span>
				</div>
				<input confirm-type="search" value="" placeholder="请输入手机号、订单号搜索" v-model="search.str" @confirm="getSearchData(search.str)" :focus="search.isShow" />
			</div>
			<div class="search-content-wrapper">
				<div class="search-content">
					<ul v-if="search.list.length > 0">
						<li v-for="item in search.list" :key="item.id" >
							<div>
								<span>姓名:</span>
								<p v-text="item.name"></p>
								<p>￥{{item.total_fee}}</p>
							</div>
							<div>
								<span>电话:</span>
								<p v-text="item.mobile"></p>
							</div>
							<div>
								<span>订单:</span>
								<p v-text="item.goods_title"></p>
							</div>
							<div>
								<p v-text="item.time"></p>
								<button @click="goPay(item)" v-if="item.status === 0" style=" background-color: #ffffff; padding: 0; color: #0385FA; font-size: 26rpx; height: 54rpx; line-height: 54rpx; width: 120rpx; border: 1rpx solid #0385FA; border-radius: 4rpx" >付款</button>
								<button @click="" v-if="item.status === 1" style=" background-color: #ffffff; padding: 0; color: #0385FA; font-size: 26rpx; height: 54rpx; line-height: 54rpx; width: 120rpx; border: 1rpx solid #0385FA; border-radius: 4rpx" >服务中</button>
								<button @click="goComment(item.id)" v-if="item.status === 2" style=" background-color: #ffffff; padding: 0; color: #FD6300; font-size: 26rpx; height: 54rpx; line-height: 54rpx; width: 120rpx; border: 1rpx solid #FD6300; border-radius: 4rpx">待评价</button>
								<button v-if="item.status === 3" style=" background-color: #ffffff; padding: 0; color: #999999; font-size: 26rpx; height: 54rpx; line-height: 54rpx; width: 120rpx; border: 1rpx solid #999999; border-radius: 4rpx">已完成</button>
							</div>
						</li>
					</ul>
					<hEmpty v-if="search.list.length === 0" center="您还没有此类订单哦" img="../../static/img/public/order-empty.png" ></hEmpty>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import hEmpty from '@/components/hEmpty/hEmpty.vue';
	import {api, domain} from '@/util/api.js';
	
	export default {
		components: {
			hEmpty
		},
		
		data() {
			return {
				navH: 0,
				nowTab: 0,
				all: {
					list: [],
					loadMore: { 
						hasMore: true,
						isLoading: false, 
						pageSize: 5, 
						page: 1 
					}
				},
				unPay: {
					list: [],
					loadMore: {
						hasMore: true,
						isLoading: false, 
						pageSize: 5, 
						page: 1 
					}
				},
				isPay: {
					list: [],
					loadMore: {
						hasMore: true,
						isLoading: false, 
						pageSize: 5, 
						page: 1 
					}
				},
				unComment: {
					list: [
						{ id: 1, name: '刘一碗', phone: '13333333333', order: '极美家·初体验', time: '2020/09/12', price: 1000, status: 2},
						{ id: 2, name: '张三', phone: '13333333333', order: '极美家·初体验', time: '2020/09/12', price: 1000, status: 2},
						{ id: 3, name: '李四', phone: '13333333333', order: '极美家·初体验', time: '2020/09/12', price: 1000, status: 2},
						{ id: 4, name: '王五', phone: '13333333333', order: '极美家·初体验', time: '2020/09/12', price: 1000, status: 2},
						{ id: 5, name: '马六', phone: '13333333333', order: '极美家·初体验', time: '2020/09/12', price: 1000, status: 2}
					],
					loadMore: {
						hasMore: true,
						isLoading: false, 
						pageSize: 5, 
						page: 1 
					}
				},
				finish: {
					list: [
						
					],
					loadMore: {
						hasMore: true,
						isLoading: false, 
						pageSize: 5, 
						page: 1 
					}
				},
				search: {
					isShow: false,
					list: [],
					str: ''
				},
				isBack: false,
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			toggleTabs(index) {
				this.nowTab = parseInt(index);
				switch(parseInt(index)) {
					case 0:
						this.all.list = [];
						this.getAllData2(1);
						break;
					case 1:
						this.unPay.list = [];
						this.getUnPayData2(1);
						break;
					case 2:
						this.isPay.list = [];
						this.getIsPayData2(1);
						break;
					default:
						break;
						
				}
			},
			
			getAllData() {
				api.getOrderList({
					limit: this.all.loadMore.pageSize,
					page: this.all.loadMore.page
				}, res => {
					this.all.list = [
						...this.all.list,
						...res.data.data
					];
					if(res.data.data.length < this.all.loadMore.pageSize) {
						this.all.loadMore.hasMore = false;
					}
				});
			},
			getAllData2(page) {
				this.all.loadMore.page = page;
				this.getAllData();
			},
			allLoadMore(e) {
				console.log('加载更多')
				if(this.all.loadMore.hasMore) {
					this.all.loadMore.isLoading = true;
					this.getAllData2(this.all.loadMore.page + 1)
				}
				
			},
			
			getUnPayData() {
				api.getOrderList({
					limit: this.unPay.loadMore.pageSize,
					page: this.unPay.loadMore.page,
					status: 0
				}, res => {
					this.unPay.list = [
						...this.unPay.list,
						...res.data.data
					];
					if(res.data.data.length < this.unPay.loadMore.pageSize) {
						this.unPay.loadMore.hasMore = false;
					}
				});
			},
			getUnPayData2(page) {
				this.unPay.loadMore.page = page;
				this.getUnPayData();
			},
			unPayLoadMore() {
				console.log('加载更多')
				if(this.unPay.loadMore.hasMore) {
					this.unPay.loadMore.isLoading = true;
					this.getUnPayData2(this.unPay.loadMore.page + 1)
				}
			},
			
			getIsPayData() {
				api.getOrderList({
					limit: this.isPay.loadMore.pageSize,
					page: this.isPay.loadMore.page,
					status: 1
				}, res => {
					this.isPay.list = [
						...this.isPay.list,
						...res.data.data
					];
					if(res.data.data.length < this.isPay.loadMore.pageSize) {
						this.isPay.loadMore.hasMore = false;
					}
				});
			},
			getIsPayData2(page) {
				this.isPay.loadMore.page = page;
				this.getIsPayData();
			},
			isPayLoadMore() {
				console.log('加载更多')
				if(this.isPay.loadMore.hasMore) {
					this.isPay.loadMore.isLoading = true;
					this.getIsPayData2(this.isPay.loadMore.page + 1)
				}
			},
			
			goPay(item) {
				console.log('付款');
				uni.navigateTo({
					url: 'orderPay/orderPay?order=' + JSON.stringify(item)
				})
			},
			showSearch() {
				this.search.isShow = true;
				
			},
			endSearchShow() {
				this.search.isShow = false;
				this.search.list = [];
				this.search.str = '';
			},
			getSearchData(payload) {
				if(this.checkMobile(payload)) {
					api.getOrderList({
						mobile: payload
					}, res => {
						this.search.list = res.data.data;
					});
				} else {
					api.getOrderList({
						order_sn: payload
					}, res => {
						this.search.list = res.data.data;
					});
				}
			},
			checkMobile(s){
			    var length = s.length;
			    if(length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(14[0-9]{1})|)+\d{8})$/.test(s) ) 
			    { 
			        return true; 
			    }else{ 
			        return false; 
			    } 
			},
			goDetail(sn) {
				console.log(sn)
				uni.navigateTo({
					url: 'orderDetail/orderDetail?sn=' + sn
				});
				this.isBack = true;
			}
			
		},
		onLoad(option) {
			this.navH = getApp().globalData.navHeight;
			this.toggleTabs(option.index || this.nowTab);
		},
		onShow() {
			if(this.isBack) {
				if(!this.search.isShow) {
					this.toggleTabs(this.nowTab);
					this.isBack = false;
				} else {
					this.getSearchData(this.search.str);
					this.isBack = false;
				}
			}
		}
	}
</script>

<style scoped>
	.page-wrapper {
		box-sizing: border-box;
		padding: 0 30rpx 0 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		/* overflow: visible; */
	}
	.title {
		display: flex;
		align-items: flex-end;
		width: 100%;
		flex-shrink: 0;
	}
	.title>div {
		width: 19rpx;
		height: 66rpx;
		display: flex;
		align-items: center;
	}
	.title>div>image {
		width: 100%;
	}
	.title>input {
		margin-left: 20rpx;
		background-color: #ffffff;
		width: 65%;
		height: 60rpx;
		font-size: 24rpx;
		border-radius: 30rpx;
		box-sizing: border-box;
		padding: 0 20rpx;
	}
	.content {
		width: 100%;
		flex-grow: 1;
		box-sizing: border-box;
		padding-top: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.tabs {
		width: 100%;
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.tabs>.tabs-top {
		width: 100%;
		flex-shrink: 0;
	}
	.tabs>.tabs-top>ul {
		width: 100%;
		white-space: nowrap;
		overflow: auto;
	}
	.tabs>.tabs-top>ul>li {
		box-sizing: border-box;
		padding: 20rpx 0;
		display: inline-block;
		width: 33.333333333%;
		text-align: center;
	}
	.tabs>.tabs-top>ul>li>p {
		font-size: 26rpx;
		position: relative;
	}
	.tabs>.tabs-top>ul>li.active>p {
		color: #0286FA;
	}
	.tabs>.tabs-top>ul>li.active>p::after {
		content: "";
		position: absolute;
		bottom: -2rpx;
		width: 35%;
		height: 2rpx;
		background-color: #0286FA;
		left: 50%;
		transform: translateX(-50%);
	}
	.tabs-content {
		flex-grow: 1;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}
	.tabs-content-item {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.tabs-content-item>scroll-view {
		width: 100%;
		height: 100%;
		overflow: auto;
		box-sizing: border-box;
		padding-bottom: 20rpx;
	}
	.tabs-content-item>scroll-view .loadmore-msg {
		width: 100%;
		padding: 20rpx 0 30rpx 0;
		box-sizing: border-box;
		text-align: center;
		font-size: 28rpx;
		color: #666666;
	}
	.tabs-content-item>scroll-view .list-item-wrapper {
		background-color: #ffffff;
		margin-top: 20rpx;
		box-sizing: border-box;
		padding: 0 40rpx
	}
	.tabs-content-item>scroll-view .list-item-wrapper>div {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 40rpx 0;
		/* border-bottom: 1rpx solid #e6e6e6; */
		position: relative;
	}
	.tabs-content-item>scroll-view .list-item-wrapper>div>span {
		font-size: 26rpx;
		flex-shrink: 0;
	}
	.tabs-content-item>scroll-view .list-item-wrapper>div>button{
		position: absolute;
		right: 0
	}
	
	
	.tabs-content-item>scroll-view .list-item-wrapper>div>p:nth-child(2) {
		flex-grow: 1;
		color: #666666;
		margin-left: 30rpx;
		font-size: 26rpx;
	}
	.tabs-content-item>scroll-view .list-item-wrapper>div>p:nth-child(3) {
		flex-shrink: 0;
		color: #FF4040;
		margin-left: 30rpx;
		font-size: 26rpx;
		
	}
	
	.tabs-content-item>scroll-view .list-item-wrapper>div:last-child {
		border-top: 2rpx solid #e6e6e6
	}
	
	.search {
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #f4f4f4;
		z-index: 10;
		box-sizing: border-box;
		padding: 0 30rpx 30rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		display: none;
	}
	.search.show {
		display: flex;
	}
	.search-title {
		display: flex;
		align-items: flex-end;
		width: 100%;
		flex-shrink: 0;
	}
	.search-title>div {
		height: 66rpx;
		display: flex;
		align-items: center;
	}
	.search-title>div>span {
		color: #666666
	}
	.search-title>input {
		margin-left: 20rpx;
		background-color: #ffffff;
		width: 60%;
		height: 60rpx;
		font-size: 24rpx;
		border-radius: 30rpx;
		box-sizing: border-box;
		padding: 0 20rpx;
	}
	.search-content-wrapper {
		width: 100%;
		flex-grow: 1;
		position: relative;
		margin-top: 20rpx;
	}
	.search-content {
		position: absolute;
		top: 0;
		left: 0;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	
	.search-content>ul {
		width: 100%;
		height: 100%;
		overflow: auto;
		box-sizing: border-box;
	}
	.search-content>ul>li {
		background-color: #ffffff;
		margin-top: 20rpx;
		box-sizing: border-box;
		padding: 0 40rpx
	}
	.search-content>ul>li>div {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 40rpx 0;
		/* border-bottom: 1rpx solid #e6e6e6; */
		position: relative;
	}
	.search-content>ul>li>div:last-child {
		border-top: 2rpx solid #e6e6e6
	}
	
	.search-content>ul>li>div>span {
		font-size: 26rpx;
	}
	.search-content>ul>li>div>button{
		position: absolute;
		right: 0
	}
	.search-content>ul>li>div>p:nth-child(2) {
		flex-grow: 1;
		color: #666666;
		margin-left: 30rpx;
		font-size: 26rpx;
	}
	.search-content>ul>li>div>p:nth-child(3) {
		flex-shrink: 0;
		color: #FF4040;
		margin-left: 30rpx;
		font-size: 26rpx;
	}
	
</style>
